<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>邦伴用户端 - 首页</title>
  <link href="https://cdn.jsdelivr.net/npm/tailwindcss@2.2.19/dist/tailwind.min.css" rel="stylesheet">
  <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css" rel="stylesheet">
  <style>
    :root {
      --primary: #ff7e2d;
      --primary-light: #fff3ea;
      --border: #f0f0f0;
      --text-main: #222;
      --text-sub: #888;
    }
    
    body {
      font-family: 'PingFang SC', 'Helvetica Neue', Arial, sans-serif;
      background-color: #f8f8f8;
      color: var(--text-main);
    }
    
    .app-container {
      width: 375px;
      height: 812px;
      margin: 0 auto;
      background: #fff;
      position: relative;
      box-shadow: 0 0 10px rgba(0, 0, 0, 0.05);
      overflow-y: auto;
    }
    
    .primary-color {
      color: var(--primary);
    }
    
    .primary-bg {
      background-color: var(--primary);
    }
    
    .primary-light-bg {
      background-color: var(--primary-light);
    }
    
    .tab-active {
      color: var(--primary);
    }
    
    .search-box {
      background-color: var(--primary-light);
      border-radius: 20px;
    }
    
    .card {
      border-radius: 12px;
      box-shadow: 0 2px 8px rgba(0,0,0,0.04);
    }
    
    .worker-avatar {
      background-color: #ffe2c6;
      color: var(--primary);
    }
    
    .bottom-nav {
      border-top: 1px solid var(--border);
    }
    
    .scroll-hidden::-webkit-scrollbar {
      display: none;
    }
    
    /* 地区选择弹窗样式 */
    .location-modal {
      position: fixed;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      background-color: rgba(0, 0, 0, 0.5);
      z-index: 50;
      display: none;
    }
    
    .location-content {
      position: absolute;
      bottom: 0;
      left: 0;
      right: 0;
      background-color: white;
      border-top-left-radius: 16px;
      border-top-right-radius: 16px;
      width: 375px;
      margin: 0 auto;
      max-height: 70vh;
      overflow-y: auto;
    }
  </style>
</head>
<body>
  <div class="app-container">
    <!-- 顶部搜索栏 -->
    <div class="sticky top-0 z-10 bg-white border-b border-gray-100 px-4 py-3 flex items-center">
      <!-- 地区选择按钮 -->
      <div id="locationBtn" class="flex items-center mr-2">
        <span class="text-sm font-medium">北京</span>
        <i class="fas fa-chevron-down text-xs ml-1 text-gray-400"></i>
      </div>
      <div class="search-box flex-1 flex items-center px-4 py-2">
        <i class="fas fa-search text-gray-400 mr-2"></i>
        <input type="text" placeholder="搜索服务/商品/护工" class="bg-transparent w-full focus:outline-none text-sm">
      </div>
      <div class="ml-3">
        <i class="fas fa-bell text-xl primary-color"></i>
      </div>
    </div>
    
    <!-- Banner轮播 -->
    <div class="px-4 mt-3">
      <div class="rounded-xl overflow-hidden relative h-32">
        <img src="https://source.unsplash.com/random/800x400/?healthcare" alt="促销活动" class="w-full h-full object-cover">
        <div class="absolute inset-0 bg-gradient-to-r from-orange-500/80 to-orange-400/80 flex items-center justify-center">
          <p class="text-white font-bold text-lg">限时特惠 新用户首单立减50元</p>
        </div>
      </div>
    </div>
    
    <!-- 服务分类 - 修改为5个模块 -->
    <div class="px-4 mt-5">
      <div class="flex flex-wrap justify-between">
        <a href="hospital.html" class="flex flex-col items-center w-1/5 mb-4">
          <div class="w-12 h-12 rounded-full primary-light-bg flex items-center justify-center mb-2">
            <i class="fas fa-hospital text-xl primary-color"></i>
          </div>
          <span class="text-xs text-center">医院陪护</span>
        </a>
        <a href="maternity.html" class="flex flex-col items-center w-1/5 mb-4">
          <div class="w-12 h-12 rounded-full primary-light-bg flex items-center justify-center mb-2">
            <i class="fas fa-baby text-xl primary-color"></i>
          </div>
          <span class="text-xs text-center">母婴服务</span>
        </a>
        <a href="homecare.html" class="flex flex-col items-center w-1/5 mb-4">
          <div class="w-12 h-12 rounded-full primary-light-bg flex items-center justify-center mb-2">
            <i class="fas fa-home text-xl primary-color"></i>
          </div>
          <span class="text-xs text-center">居家照护</span>
        </a>
        <a href="cleaning.html" class="flex flex-col items-center w-1/5 mb-4">
          <div class="w-12 h-12 rounded-full primary-light-bg flex items-center justify-center mb-2">
            <i class="fas fa-broom text-xl primary-color"></i>
          </div>
          <span class="text-xs text-center">家政服务</span>
        </a>
        <a href="shop.html" class="flex flex-col items-center w-1/5 mb-4">
          <div class="w-12 h-12 rounded-full primary-light-bg flex items-center justify-center mb-2">
            <i class="fas fa-shopping-bag text-xl primary-color"></i>
          </div>
          <span class="text-xs text-center">健康商城</span>
        </a>
      </div>
    </div>
    
    <!-- 推荐护工 -->
    <div class="mt-6 px-4">
      <div class="flex justify-between items-center mb-3">
        <h3 class="font-medium">推荐护工</h3>
        <a href="workers.html" class="text-sm text-gray-500">更多 <i class="fas fa-chevron-right text-xs"></i></a>
      </div>
      
      <div class="flex overflow-x-auto scroll-hidden pb-2 -mx-1">
        <a href="worker_detail.html" class="card bg-white p-3 mx-1 min-w-[120px] flex-shrink-0">
          <div class="worker-avatar w-14 h-14 rounded-full flex items-center justify-center mx-auto mb-2 text-lg font-bold">张</div>
          <div class="text-center">
            <p class="font-medium text-sm">张阿姨</p>
            <p class="text-xs text-gray-500">48岁 | 5年经验</p>
            <p class="text-xs primary-color">⭐ 4.9分</p>
          </div>
        </a>
        
        <a href="worker_detail.html" class="card bg-white p-3 mx-1 min-w-[120px] flex-shrink-0">
          <div class="worker-avatar w-14 h-14 rounded-full flex items-center justify-center mx-auto mb-2 text-lg font-bold">李</div>
          <div class="text-center">
            <p class="font-medium text-sm">李大姐</p>
            <p class="text-xs text-gray-500">42岁 | 3年经验</p>
            <p class="text-xs primary-color">⭐ 4.8分</p>
          </div>
        </a>
        
        <a href="worker_detail.html" class="card bg-white p-3 mx-1 min-w-[120px] flex-shrink-0">
          <div class="worker-avatar w-14 h-14 rounded-full flex items-center justify-center mx-auto mb-2 text-lg font-bold">王</div>
          <div class="text-center">
            <p class="font-medium text-sm">王阿姨</p>
            <p class="text-xs text-gray-500">52岁 | 8年经验</p>
            <p class="text-xs primary-color">⭐ 4.9分</p>
          </div>
        </a>
        
        <a href="worker_detail.html" class="card bg-white p-3 mx-1 min-w-[120px] flex-shrink-0">
          <div class="worker-avatar w-14 h-14 rounded-full flex items-center justify-center mx-auto mb-2 text-lg font-bold">赵</div>
          <div class="text-center">
            <p class="font-medium text-sm">赵阿姨</p>
            <p class="text-xs text-gray-500">45岁 | 4年经验</p>
            <p class="text-xs primary-color">⭐ 4.7分</p>
          </div>
        </a>
      </div>
    </div>
    
    <!-- 热门商品 -->
    <div class="mt-6 px-4">
      <div class="flex justify-between items-center mb-3">
        <h3 class="font-medium">热门商品</h3>
        <a href="shop.html" class="text-sm text-gray-500">更多 <i class="fas fa-chevron-right text-xs"></i></a>
      </div>
      
      <div class="flex overflow-x-auto scroll-hidden pb-2 -mx-1">
        <a href="product_detail.html" class="card bg-white p-3 mx-1 min-w-[130px] flex-shrink-0">
          <div class="rounded-lg bg-orange-100 h-24 flex items-center justify-center mb-2">
            <i class="fas fa-wheelchair text-3xl primary-color"></i>
          </div>
          <p class="font-medium text-sm">轻便折叠轮椅</p>
          <p class="text-xs text-gray-500 truncate">铝合金材质 轻便耐用</p>
          <p class="text-sm primary-color font-medium mt-1">¥299</p>
        </a>
        
        <a href="product_detail.html" class="card bg-white p-3 mx-1 min-w-[130px] flex-shrink-0">
          <div class="rounded-lg bg-orange-100 h-24 flex items-center justify-center mb-2">
            <i class="fas fa-bed text-3xl primary-color"></i>
          </div>
          <p class="font-medium text-sm">多功能护理床</p>
          <p class="text-xs text-gray-500 truncate">电动升降 防褥疮设计</p>
          <p class="text-sm primary-color font-medium mt-1">¥899</p>
        </a>
        
        <a href="product_detail.html" class="card bg-white p-3 mx-1 min-w-[130px] flex-shrink-0">
          <div class="rounded-lg bg-orange-100 h-24 flex items-center justify-center mb-2">
            <i class="fas fa-pump-medical text-3xl primary-color"></i>
          </div>
          <p class="font-medium text-sm">舒缓护肤套装</p>
          <p class="text-xs text-gray-500 truncate">敏感肌适用 天然成分</p>
          <p class="text-sm primary-color font-medium mt-1">¥159</p>
        </a>
        
        <a href="product_detail.html" class="card bg-white p-3 mx-1 min-w-[130px] flex-shrink-0">
          <div class="rounded-lg bg-orange-100 h-24 flex items-center justify-center mb-2">
            <i class="fas fa-brain text-3xl primary-color"></i>
          </div>
          <p class="font-medium text-sm">老年健脑训练套装</p>
          <p class="text-xs text-gray-500 truncate">促进脑部活力</p>
          <p class="text-sm primary-color font-medium mt-1">¥258</p>
        </a>
      </div>
    </div>
    
    <!-- 会员卡 -->
    <div class="mt-6 px-4">
      <div class="card rounded-xl overflow-hidden">
        <div class="bg-gradient-to-r from-orange-500 to-orange-400 p-4 text-white">
          <div class="flex justify-between items-center mb-4">
            <h3 class="font-bold text-white">普通会员</h3>
            <a href="member_activate.html" class="bg-white bg-opacity-20 rounded-full px-3 py-1 text-xs">立即升级</a>
          </div>
          <div class="grid grid-cols-3 text-center">
            <a href="coupons.html" class="text-white">
              <p class="text-lg font-bold">3</p>
              <p class="text-xs opacity-80">优惠券</p>
            </a>
            <a href="member_points.html" class="text-white">
              <p class="text-lg font-bold">210</p>
              <p class="text-xs opacity-80">积分</p>
            </a>
            <a href="service_benefits.html" class="text-white">
              <p class="text-lg font-bold">2</p>
              <p class="text-xs opacity-80">服务权益</p>
            </a>
          </div>
        </div>
      </div>
    </div>
    
    <!-- 每日签到 -->
    <div class="mt-6 px-4">
      <div class="card bg-white p-4">
        <div class="flex justify-between items-center">
          <div>
            <h3 class="font-medium">每日签到</h3>
            <p class="text-xs text-gray-500 mt-1">连续签到7天可获得额外奖励</p>
          </div>
          <a href="member_points_tasks.html" class="btn-primary px-4 py-1.5 rounded-full text-sm text-white">签到领积分</a>
        </div>
        
        <div class="flex justify-between mt-4">
          <div class="flex flex-col items-center">
            <div class="w-8 h-8 rounded-full primary-bg flex items-center justify-center text-white text-xs">
              <i class="fas fa-check"></i>
            </div>
            <span class="text-xs mt-1">周一</span>
          </div>
          <div class="flex flex-col items-center">
            <div class="w-8 h-8 rounded-full primary-bg flex items-center justify-center text-white text-xs">
              <i class="fas fa-check"></i>
            </div>
            <span class="text-xs mt-1">周二</span>
          </div>
          <div class="flex flex-col items-center">
            <div class="w-8 h-8 rounded-full bg-gray-100 flex items-center justify-center text-gray-400 text-xs">
              <span>3</span>
            </div>
            <span class="text-xs mt-1">周三</span>
          </div>
          <div class="flex flex-col items-center">
            <div class="w-8 h-8 rounded-full bg-gray-100 flex items-center justify-center text-gray-400 text-xs">
              <span>5</span>
            </div>
            <span class="text-xs mt-1">周四</span>
          </div>
          <div class="flex flex-col items-center">
            <div class="w-8 h-8 rounded-full bg-gray-100 flex items-center justify-center text-gray-400 text-xs">
              <span>5</span>
            </div>
            <span class="text-xs mt-1">周五</span>
          </div>
          <div class="flex flex-col items-center">
            <div class="w-8 h-8 rounded-full bg-gray-100 flex items-center justify-center text-gray-400 text-xs">
              <span>8</span>
            </div>
            <span class="text-xs mt-1">周六</span>
          </div>
          <div class="flex flex-col items-center">
            <div class="w-8 h-8 rounded-full bg-gray-100 flex items-center justify-center text-gray-400 text-xs">
              <span>10</span>
            </div>
            <span class="text-xs mt-1">周日</span>
          </div>
        </div>
      </div>
    </div>

    <!-- 会员专区 -->
    <div class="mt-6 px-4">
      <div class="flex justify-between items-center mb-3">
        <h3 class="font-medium">会员专区</h3>
        <a href="member_benefits.html" class="text-sm text-gray-500">查看全部 <i class="fas fa-chevron-right text-xs"></i></a>
      </div>
      
      <div class="grid grid-cols-2 gap-3">
        <a href="member_mall.html" class="card bg-white p-3">
          <div class="flex items-center mb-2">
            <div class="w-10 h-10 rounded-full primary-light-bg flex items-center justify-center mr-2">
              <i class="fas fa-shopping-bag primary-color"></i>
            </div>
            <h4 class="font-medium text-sm">会员商城</h4>
          </div>
          <p class="text-xs text-gray-500">会员专享商品低至7折</p>
        </a>
        
        <a href="member_points_mall.html" class="card bg-white p-3">
          <div class="flex items-center mb-2">
            <div class="w-10 h-10 rounded-full primary-light-bg flex items-center justify-center mr-2">
              <i class="fas fa-gift primary-color"></i>
            </div>
            <h4 class="font-medium text-sm">积分兑换</h4>
          </div>
          <p class="text-xs text-gray-500">积分好礼等你来兑</p>
        </a>
        
        <a href="service_benefits.html" class="card bg-white p-3">
          <div class="flex items-center mb-2">
            <div class="w-10 h-10 rounded-full primary-light-bg flex items-center justify-center mr-2">
              <i class="fas fa-ticket-alt primary-color"></i>
            </div>
            <h4 class="font-medium text-sm">服务权益</h4>
          </div>
          <p class="text-xs text-gray-500">专属服务 尊享体验</p>
        </a>
        
        <a href="member_activate.html" class="card bg-white p-3">
          <div class="flex items-center mb-2">
            <div class="w-10 h-10 rounded-full primary-light-bg flex items-center justify-center mr-2">
              <i class="fas fa-crown primary-color"></i>
            </div>
            <h4 class="font-medium text-sm">会员升级</h4>
          </div>
          <p class="text-xs text-gray-500">升级会员 享更多特权</p>
        </a>
      </div>
    </div>
    
    <!-- 底部空间 -->
    <div class="pb-20"></div>
    
    <!-- 底部导航栏 -->
    <div class="fixed bottom-0 z-10 bg-white bottom-nav" style="width: 375px; margin: 0 auto;">
      <div class="grid grid-cols-5 py-1">
        <a href="index.html" class="flex flex-col items-center py-1 tab-active">
          <i class="fas fa-home text-lg"></i>
          <span class="text-xs mt-1">首页</span>
        </a>
        <a href="orders.html" class="flex flex-col items-center py-1 text-gray-500">
          <i class="fas fa-clipboard-list text-lg"></i>
          <span class="text-xs mt-1">订单</span>
        </a>
        <a href="messages.html" class="flex flex-col items-center py-1 text-gray-500">
          <i class="fas fa-comment-dots text-lg"></i>
          <span class="text-xs mt-1">消息</span>
        </a>
        <a href="member_center.html" class="flex flex-col items-center py-1 text-gray-500">
          <i class="fas fa-crown text-lg"></i>
          <span class="text-xs mt-1">会员</span>
        </a>
        <a href="user_center.html" class="flex flex-col items-center py-1 text-gray-500">
          <i class="fas fa-user text-lg"></i>
          <span class="text-xs mt-1">我的</span>
        </a>
      </div>
    </div>
    
  </div>
  
  <!-- 地区选择弹窗 -->
  <div id="locationModal" class="location-modal">
    <div class="location-content">
      <div class="p-4 border-b border-gray-100">
        <div class="flex justify-between items-center">
          <h3 class="text-lg font-bold">选择地区</h3>
          <button id="closeLocationModal" class="text-gray-400">
            <i class="fas fa-times text-xl"></i>
          </button>
        </div>
      </div>
      
      <!-- 当前定位 -->
      <div class="px-4 py-3 border-b border-gray-100">
        <div class="text-sm text-gray-500 mb-2">当前定位</div>
        <div class="flex items-center">
          <i class="fas fa-map-marker-alt primary-color mr-2"></i>
          <span>北京市朝阳区</span>
        </div>
      </div>
      
      <!-- 热门城市 -->
      <div class="px-4 py-3 border-b border-gray-100">
        <div class="text-sm text-gray-500 mb-2">热门城市</div>
        <div class="grid grid-cols-3 gap-3">
          <div class="bg-gray-50 rounded py-2 text-center">北京</div>
          <div class="bg-gray-50 rounded py-2 text-center">上海</div>
          <div class="bg-gray-50 rounded py-2 text-center">广州</div>
          <div class="bg-gray-50 rounded py-2 text-center">深圳</div>
          <div class="bg-gray-50 rounded py-2 text-center">杭州</div>
          <div class="bg-gray-50 rounded py-2 text-center">成都</div>
        </div>
      </div>
      
      <!-- 全部城市 -->
      <div class="px-4 py-3">
        <div class="text-sm text-gray-500 mb-2">全部城市</div>
        
        <div class="mb-4">
          <div class="text-gray-400 text-xs mb-1">A</div>
          <div class="grid grid-cols-3 gap-2">
            <div class="bg-gray-50 rounded py-2 text-center text-sm">安徽</div>
            <div class="bg-gray-50 rounded py-2 text-center text-sm">鞍山</div>
          </div>
        </div>
        
        <div class="mb-4">
          <div class="text-gray-400 text-xs mb-1">B</div>
          <div class="grid grid-cols-3 gap-2">
            <div class="bg-gray-50 rounded py-2 text-center text-sm">北京</div>
            <div class="bg-gray-50 rounded py-2 text-center text-sm">保定</div>
            <div class="bg-gray-50 rounded py-2 text-center text-sm">包头</div>
          </div>
        </div>
        
        <div class="mb-4">
          <div class="text-gray-400 text-xs mb-1">C</div>
          <div class="grid grid-cols-3 gap-2">
            <div class="bg-gray-50 rounded py-2 text-center text-sm">长沙</div>
            <div class="bg-gray-50 rounded py-2 text-center text-sm">长春</div>
            <div class="bg-gray-50 rounded py-2 text-center text-sm">成都</div>
            <div class="bg-gray-50 rounded py-2 text-center text-sm">重庆</div>
          </div>
        </div>
        
        <div class="mb-4">
          <div class="text-gray-400 text-xs mb-1">D</div>
          <div class="grid grid-cols-3 gap-2">
            <div class="bg-gray-50 rounded py-2 text-center text-sm">大连</div>
            <div class="bg-gray-50 rounded py-2 text-center text-sm">东莞</div>
          </div>
        </div>
        
        <!-- 更多城市字母分组 -->
      </div>
    </div>
  </div>

  <script>
    // 简单的导航激活状态切换
    document.addEventListener('DOMContentLoaded', function() {
      const navItems = document.querySelectorAll('.bottom-nav a');
      navItems.forEach(item => {
        item.addEventListener('click', function() {
          navItems.forEach(i => i.classList.remove('tab-active'));
          navItems.forEach(i => i.classList.add('text-gray-500'));
          this.classList.add('tab-active');
          this.classList.remove('text-gray-500');
        });
      });
      
      // 签到功能
      const signInBtn = document.querySelector('.btn-primary.px-4.py-1\\.5.rounded-full');
      if (signInBtn) {
        signInBtn.addEventListener('click', function(e) {
          if (this.tagName.toLowerCase() === 'a') {
            return; // 如果是链接，让它正常导航
          }
          
          // 今天是周三，点击后显示已签到状态
          const wednesdayCircle = document.querySelectorAll('.flex.justify-between.mt-4 .flex.flex-col.items-center')[2].querySelector('div');
          wednesdayCircle.classList.remove('bg-gray-100', 'text-gray-400');
          wednesdayCircle.classList.add('primary-bg', 'text-white');
          wednesdayCircle.innerHTML = '<i class="fas fa-check"></i>';
          
          // 修改按钮状态
          this.textContent = '已签到';
          this.disabled = true;
          this.classList.add('bg-gray-300');
          this.classList.remove('btn-primary');
          
          // 显示签到成功提示
          alert('签到成功！获得3积分');
          
          e.preventDefault();
        });
      }
      
      // 地区选择弹窗
      const locationBtn = document.getElementById('locationBtn');
      const locationModal = document.getElementById('locationModal');
      const closeLocationModal = document.getElementById('closeLocationModal');
      
      locationBtn.addEventListener('click', function() {
        locationModal.style.display = 'block';
        document.body.style.overflow = 'hidden'; // 防止背景滚动
      });
      
      closeLocationModal.addEventListener('click', function() {
        locationModal.style.display = 'none';
        document.body.style.overflow = ''; // 恢复滚动
      });
      
      // 点击弹窗外部关闭
      locationModal.addEventListener('click', function(e) {
        if (e.target === locationModal) {
          locationModal.style.display = 'none';
          document.body.style.overflow = '';
        }
      });
      
      // 选择城市
      const cityItems = document.querySelectorAll('.location-content .grid div');
      cityItems.forEach(item => {
        item.addEventListener('click', function() {
          const cityName = this.textContent;
          document.querySelector('#locationBtn span').textContent = cityName;
          locationModal.style.display = 'none';
          document.body.style.overflow = '';
        });
      });
    });
  </script>
</body>
</html> 